<template>
  <div class="gauge-temperature-wrapper" :style="containerStyle">
    <v-chart ref="chartRef" :option="chartOption" :style="chartStyle" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { use } from 'echarts/core';
import * as echarts from 'echarts';
import { CanvasRenderer } from 'echarts/renderers';
import { GaugeChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import VChart from 'vue-echarts';
import { useAutoDataBinding } from '@/composables/use-data-binding';

// 注册ECharts组件
use([CanvasRenderer, GaugeChart, TitleComponent, TooltipComponent, LegendComponent]);

// Props定义
interface Props {
  value?: number;
  maxValue?: number;
  unit?: string;
  startAngle?: number;
  endAngle?: number;
  mainProgressColor?: string;
  subProgressColor?: string;
  axisLineWidth?: number;
  subProgressWidth?: number;
  tickColor?: string;
  splitLineColor?: string;
  labelColor?: string;
  dataBinding?: any;
}

const props = withDefaults(defineProps<Props>(), {
  value: 20,
  maxValue: 60,
  unit: '°C',
  startAngle: 200,
  endAngle: -20,
  mainProgressColor: '#FFAB91',
  subProgressColor: '#FD7347',
  axisLineWidth: 30,
  subProgressWidth: 8,
  tickColor: '#999',
  splitLineColor: '#999',
  labelColor: '#999'
});

// 图表引用
const chartRef = ref<InstanceType<typeof VChart>>();

// 响应式属性（用于数据绑定）
const componentProps = computed(() => ({
  value: props.value,
  maxValue: props.maxValue,
  unit: props.unit,
  startAngle: props.startAngle,
  endAngle: props.endAngle,
  mainProgressColor: props.mainProgressColor,
  subProgressColor: props.subProgressColor,
  axisLineWidth: props.axisLineWidth,
  subProgressWidth: props.subProgressWidth,
  tickColor: props.tickColor,
  splitLineColor: props.splitLineColor,
  labelColor: props.labelColor
}));

// 数据绑定
const dataBinding = useAutoDataBinding(
  props.dataBinding?.enabled ? props.dataBinding : null,
  componentProps
);

// 样式计算
const containerStyle = computed(() => ({
  width: '100%',
  height: '100%',
  minHeight: '400px'
}));

const chartStyle = computed(() => ({
  width: '100%',
  height: '100%'
}));

// 双层温度仪表盘配置
const chartOption = computed(() => {
  const value = componentProps.value.value;
  const maxValue = componentProps.value.maxValue;
  const unit = componentProps.value.unit;
  const startAngle = componentProps.value.startAngle;
  const endAngle = componentProps.value.endAngle;
  const mainProgressColor = componentProps.value.mainProgressColor;
  const subProgressColor = componentProps.value.subProgressColor;
  const axisLineWidth = componentProps.value.axisLineWidth;
  const subProgressWidth = componentProps.value.subProgressWidth;
  const tickColor = componentProps.value.tickColor;
  const splitLineColor = componentProps.value.splitLineColor;
  const labelColor = componentProps.value.labelColor;

  return {
    series: [
      {
        type: 'gauge',
        center: ['50%', '60%'],
        startAngle: startAngle,
        endAngle: endAngle,
        min: 0,
        max: maxValue,
        splitNumber: 12,
        itemStyle: {
          color: mainProgressColor
        },
        progress: {
          show: true,
          width: axisLineWidth
        },
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            width: axisLineWidth
          }
        },
        axisTick: {
          distance: -45,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: tickColor
          }
        },
        splitLine: {
          distance: -52,
          length: 14,
          lineStyle: {
            width: 3,
            color: splitLineColor
          }
        },
        axisLabel: {
          distance: -20,
          color: labelColor,
          fontSize: 20
        },
        anchor: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          width: '60%',
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, '-15%'],
          fontSize: 60,
          fontWeight: 'bolder',
          formatter: `{value} ${unit}`,
          color: 'inherit'
        },
        data: [
          {
            value: value
          }
        ]
      },
      {
        type: 'gauge',
        center: ['50%', '60%'],
        startAngle: startAngle,
        endAngle: endAngle,
        min: 0,
        max: maxValue,
        itemStyle: {
          color: subProgressColor
        },
        progress: {
          show: true,
          width: subProgressWidth
        },
        pointer: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        detail: {
          show: false
        },
        data: [
          {
            value: value
          }
        ]
      }
    ]
  };
});

onMounted(() => {
  // 确保图表可以正确响应尺寸变化
  if (chartRef.value) {
    // 延迟调用resize确保图表正确渲染
    setTimeout(() => {
      chartRef.value?.resize();
    }, 100);
  }
});
</script>

<style scoped>
.gauge-temperature-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.gauge-temperature-wrapper > div {
  width: 100% !important;
  height: 100% !important;
}
</style>
